<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页实例</title>
<link rel="stylesheet" type="text/css" href="01.css">
</head>
<body>


<div id="wrapper">
<header>
    <section id="title">
        <h1>Stylin&#8217; with CSS</h1>
        <h2>The Blog and Books of Charles Wyke-Smith</h2>
    </section>
    <nav class="menu">
        <ul>
            <li class="choice1"><a href="#">Articles</a></li>
            <li class="choice2"><a href="#">Books</a></li>
            <li class="choice3" ><a href="#">Resources</a></li>
            <li class="choice4"><a href="#">Bookshelf</a></li>
            <li class="choice5"><a href="#">Contact Me</a>
                <ul>
                    <li class="choice6"><a href="#">21</a></li>
                    <li class="choise7"><a href="#">22</a>
                        <ul>
                            <li class="choice8"><a href="#">31</a></li>
                            <li class="choice9"><a href="#">32</a></li>                          

                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
    <form class="search" action="#" method="post">
        <label for="user_name">search</label> 
        <!-- 标注的for属性与文本框ID相同 -->
        <input type="text" id="user_name" name="user_name" placeholder="search" />
    </form>
</header>
  

<section id="feature_area"><!-- 一级 -->
    <article id="blog_leadoff"><!-- 二级 -->
<!-- 博客内容 -->
    <div class="inner">
        <h4>march 3, 2016</h4>
        <a href="#"><h3>Managing CSS Classes with jQuery</h3></a>
        <img src="1.jpg" alt="Wyke-Smithphoto" />
        <p>Sintus at neque in magna...</p>
    </div>
    </article>

    <aside>
    <form autocomplete="off" class="signin"
        action="process_form.php" method="post">
         <!-- 必要的<form>标签 -->
        <fieldset> <!-- 作为表单控件的容器 -->
        <!-- 控件组的标题 -->
        <legend><span>Sign In for Code and Updates</span></legend>
        <section> <!-- 用于为控件、标注和说明添加样式的外包装 -->
            <!-- 与控件ID 同名的for 属性将标注与控件关联起来 -->
            <label for="email">Email</label>
            <!-- type 属性的text 值表明这是文本框 -->
            <input type="text" id="email" name="email" />
        </section>
        <section>
            <label for="password">Password</label>
            <input type="password" id="password" name="password"
            maxlength="20" /> <!-- 密码框中的字符显示为掩码 -->
            <p class="direction">Wrong user name or password</p>
        </section>
        <section> <!-- 提交按钮 -->
            <input type="submit" value="Sign In" />
            <p class="signup">Not signed up? 
                <a href="#">Register now! </a>
            </p>
        </section>
        </fieldset>
    </form>

    <nav>
    <h3>Recent Articles</h3>
    <!-- 博文链接 -->
        <ul>
        <li><a href="#">Z-index&mdash;Layers of Confusion</a></li>
        <li><a href="#">Box-Image Techniques</a></li>
        <li><a href="#">Shadow FX with CSS3</a></li>
        </ul>
    </nav>
    </aside>
</section>

<!-- 图书区 -->
<section id="book_area">
    <article class="left">
        <div class="inner">
            <h3>HTML5 + CSS3</h3><!-- 要旋转的文字 -->
            <img src="22.jpg" alt="Stylin' with CSS cover" />
            <aside> <!-- 弹出层 -->
            <ol>
                <li><a href="#">Download the Code</a></li>
                <li><a href="#">Table of Contents</a></li>
                <li><a href="#">Buy this Book</a></li>
            </ol>
            </aside>
        </div>
    </article>
<!-- 另外三本图书的标记也一样 -->
<article class="left">
        <div class="inner">
            <h3>HTML5 + CSS3</h3><!-- 要旋转的文字 -->
            <img src="22.jpg" alt="Stylin' with CSS cover" />
            <aside> <!-- 弹出层 -->
            <ol>
                <li><a href="#">Download the Code</a></li>
                <li><a href="#">Table of Contents</a></li>
                <li><a href="#">Buy this Book</a></li>
            </ol>
            </aside>
        </div>
    </article>
    <article class="left">
        <div class="inner">
            <h3>HTML5 + CSS3</h3><!-- 要旋转的文字 -->
            <img src="22.jpg" alt="Stylin' with CSS cover" />
            <aside> <!-- 弹出层 -->
            <ol>
                <li><a href="#">Download the Code</a></li>
                <li><a href="#">Table of Contents</a></li>
                <li><a href="#">Buy this Book</a></li>
            </ol>
            </aside>
        </div>
    </article>
    <article class="right">
        <div class="inner">
            <h3>HTML5 + CSS3</h3><!-- 要旋转的文字 -->
            <img src="22.jpg" alt="Stylin' with CSS cover" />
            <aside> <!-- 弹出层 -->
            <ol>
                <li><a href="#">Download the Code</a></li>
                <li><a href="#">Table of Contents</a></li>
                <li><a href="#">Buy this Book</a></li>
            </ol>
            </aside>
        </div>
    </article>
</section>




<footer>
    <p>A CSS template from <a href="http://www.stylinwithcss.com"><em>Stylin'
    with CSS, Third Edition</em></a> by Charles Wyke-Smith
    </p>
<nav>
    <ul>
        <li><a href="#">Privacy Policy</a></li>
        <li><a href="#">Contact Charles</a></li>
    </ul>
</nav>
</footer>



</div> <!-- wrapper 结束 -->
</body>
</html>